<template>
  <view class="container">
    <!-- 密码显示区域 -->
    <view class="password-display-section">
      <view class="password-display">
        <text class="password-text" :class="{ 'placeholder': !generatedPassword }">
          {{ generatedPassword || '点击生成密码' }}
        </text>
        <view class="copy-button cursor-pointer" @click="copyPassword" v-if="generatedPassword">
          <uni-icons type="list" size="20" color="#007AFF"></uni-icons>
        </view>
      </view>
    </view>

    <!-- 密码长度控制 -->
    <view class="length-section">
      <view class="section-header">
        <text class="section-title">密码长度</text>
        <text class="length-value">{{ passwordLength }}</text>
      </view>
      <view class="slider-container">
        <text class="slider-label">8</text>
        <slider 
          class="length-slider"
          :value="passwordLength"
          :min="8"
          :max="32"
          :step="1"
          activeColor="#007AFF"
          backgroundColor="#E5E5E5"
          block-color="#007AFF"
          block-size="24"
          @change="onLengthChange"
        />
        <text class="slider-label">32</text>
      </view>
    </view>

    <!-- 密码选项设置 -->
    <view class="options-section">
      <text class="section-title">密码选项</text>
      <view class="options-list">
        <view class="option-item cursor-pointer" @click="toggleOption('uppercase')">
          <checkbox 
            :checked="options.uppercase" 
            color="#007AFF"
            @click.stop="toggleOption('uppercase')"
          />
          <text class="option-text">大写字母 (A-Z)</text>
        </view>
        <view class="option-item cursor-pointer" @click="toggleOption('lowercase')">
          <checkbox 
            :checked="options.lowercase" 
            color="#007AFF"
            @click.stop="toggleOption('lowercase')"
          />
          <text class="option-text">小写字母 (a-z)</text>
        </view>
        <view class="option-item cursor-pointer" @click="toggleOption('numbers')">
          <checkbox 
            :checked="options.numbers" 
            color="#007AFF"
            @click.stop="toggleOption('numbers')"
          />
          <text class="option-text">数字 (0-9)</text>
        </view>
        <view class="option-item cursor-pointer" @click="toggleOption('symbols')">
          <checkbox 
            :checked="options.symbols" 
            color="#007AFF"
            @click.stop="toggleOption('symbols')"
          />
          <text class="option-text">特殊符号 (!@#$等)</text>
        </view>
      </view>
    </view>

    <!-- 生成按钮 -->
    <view class="generate-section">
      <button 
        class="generate-button cursor-pointer" 
        :class="{ 'button-active': isGenerating }"
        @click="generatePassword"
        :disabled="!hasSelectedOptions"
      >
        生成密码
      </button>
    </view>

    <!-- 复制成功提示 -->
    <view class="toast" :class="{ 'toast-show': showToast }">
      <text class="toast-text">密码已复制到剪贴板</text>
    </view>
  </view>
</template>

<script lang="ts" setup>
declare const uni: any; // 新增这一行
import { ref, computed, reactive } from 'vue'
const passwordLength = ref(12)
const generatedPassword = ref('')
const isGenerating = ref(false)
const showToast = ref(false)

const options = reactive({
  uppercase: true,
  lowercase: true,
  numbers: true,
  symbols: false
})

const hasSelectedOptions = computed(() => {
  return options.uppercase || options.lowercase || options.numbers || options.symbols
})

const onLengthChange = (e: any) => {
  passwordLength.value = e.detail.value
}

const toggleOption = (option: keyof typeof options) => {
  options[option] = !options[option]
}

const generatePassword = () => {
  if (!hasSelectedOptions.value) return
  
  isGenerating.value = true
  
  setTimeout(() => {
    let charset = ''
    if (options.uppercase) charset += 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'
    if (options.lowercase) charset += 'abcdefghijklmnopqrstuvwxyz'
    if (options.numbers) charset += '0123456789'
    if (options.symbols) charset += '!@#$%^&*()_+-=[]{}|;:,.<>?'
    
    let password = ''
    for (let i = 0; i < passwordLength.value; i++) {
      password += charset.charAt(Math.floor(Math.random() * charset.length))
    }
    
    generatedPassword.value = password
    savePasswordToStorage(password)
    isGenerating.value = false
  }, 300)
}

const savePasswordToStorage = (password: string) => {
  uni.getStorage({
    key: 'passwords',
    success: (res) => {
      const arr = Array.isArray(res.data) ? res.data : [];
      arr.unshift(password); // 新密码放最前面
      uni.setStorage({ key: 'passwords', data: arr });
    },
    fail: () => {
      uni.setStorage({ key: 'passwords', data: [password] });
    }
  });
}

const copyPassword = () => {
  if (!generatedPassword.value) return
  
  uni.setClipboardData({
    data: generatedPassword.value,
    success: () => {
      showToast.value = true
      setTimeout(() => {
        showToast.value = false
      }, 2000)
    }
  })
}
</script>

<style>
page {
  height: 100%;
}

.container {
  height: 100%;
  background-color: #FFFFFF;
  padding: 0 40rpx;
  margin-top: 20rpx;
  overflow: hidden;
}

.cursor-pointer {
  cursor: pointer;
}

/* 密码显示区域 */
.password-display-section {
  width: 100%;
  margin-bottom: 80rpx;
}

.password-display {
  width: 100%;
  height: 120rpx;
  background-color: #F8F9FA;
  border: 2px solid #E9ECEF;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.password-text {
  flex: 1;
  font-size: 32rpx;
  color: #212529;
  font-family: 'Courier New', monospace;
  word-break: break-all;
  line-height: 1.4;
}

.password-text.placeholder {
  color: #6C757D;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.copy-button {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8rpx;
  background-color: #F0F8FF;
  margin-left: 24rpx;
  flex-shrink: 0;
}

/* 密码长度控制 */
.length-section {
  width: 100%;
  margin-bottom: 80rpx;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32rpx;
}

.section-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #212529;
}

.length-value {
  font-size: 36rpx;
  font-weight: 600;
  color: #007AFF;
}

.slider-container {
  display: flex;
  align-items: center;
  gap: 24rpx;
}

.slider-label {
  font-size: 28rpx;
  color: #6C757D;
  width: 40rpx;
  text-align: center;
}

.length-slider {
  flex: 1;
  height: 8rpx;
}

/* 密码选项设置 */
.options-section {
  width: 100%;
  margin-bottom: 80rpx;
}

.options-list {
  margin-top: 32rpx;
}

.option-item {
  display: flex;
  align-items: center;
  padding: 24rpx 0;
  border-bottom: 1px solid #F1F3F4;
}

.option-item:last-child {
  border-bottom: none;
}

.option-text {
  font-size: 32rpx;
  color: #212529;
  margin-left: 24rpx;
}

/* 生成按钮 */
.generate-section {
  width: 100%;
  margin-top: auto;
  padding-top: 40rpx;
}

.generate-button {
  width: 100%;
  height: 96rpx;
  background-color: #007AFF;
  color: #FFFFFF;
  border: none;
  border-radius: 16rpx;
  font-size: 36rpx;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  margin: 0;
}

.generate-button:disabled {
  background-color: #CED4DA;
  color: #6C757D;
}

.generate-button.button-active {
  transform: scale(0.98);
  background-color: #0056CC;
}

.generate-button:not(:disabled):active {
  transform: scale(0.98);
  background-color: #0056CC;
}

/* 复制成功提示 */
.toast {
  position: fixed;
  top: 120rpx;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.8);
  color: #FFFFFF;
  padding: 24rpx 32rpx;
  border-radius: 12rpx;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1000;
}

.toast-show {
  opacity: 1;
}

.toast-text {
  font-size: 28rpx;
  white-space: nowrap;
}
</style>
